<template>
  <div class="easyForm">
    <div class="easyItem" v-for="item in form" :key="item.id">
      <el-col :span="item.span ? item.span : 10" size="medium">
        <el-form-item class="goodsInput" :label="item.name">
          <!-- 下拉选择框 -->
          <el-select
            v-if="item.type == 'select'"
            v-model="item.data"
            :placeholder="item.text"
            class="selectbtn"
            @change="change"
            clearable
          >
            <el-option label="已合作" value="1"> </el-option>
            <el-option label="未合作" value="2"> </el-option>
          </el-select>
          <!-- 日期选择框 -->
          <el-date-picker
            v-else-if="item.type == 'date'"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-model="item.data"
            style="width: 100%"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="datechange"
            clearable
          ></el-date-picker>
          <!-- 图片上传框 -->
          <el-upload
            v-else-if="item.type == 'pic'"
            class="upload-demo"
            action="http://120.27.210.24:8080/addFinanceUpload"
            name="finance_EnclosureUpload"
            :on-success="uploadSuccess"
            :on-error="uploadFail"
          >
            <el-button size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <!-- 地址选择框 -->
          <el-cascader
            v-else-if="item.type == 'area'"
            :options="item.options"
            v-model="item.selectedOptions"
            @change="handleChange"
            clearable
          ></el-cascader>
          <!-- 普通输入框 -->
          <el-input v-else v-model="item.data" @input="input" :type="item.textarea ? item.textarea : 'text'"
          :autosize="{ minRows: 2, maxRows: 4}" clearable></el-input>
        </el-form-item>
      </el-col>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    formList: Array,
  },
  data() {
    return {
      form: this.formList,
    };
  },
  methods: {
    // 输入
    input() {
      this.$emit("input", this.form);
    },
    // 选择
    change() {
      this.$emit("change", this.form);
    },
    // 日期
    datechange(value) {
      this.$emit("datechange", value);
    },
    // 上传成功的回调函数
    uploadSuccess(res) {
      console.log("成功:", res);
    },
    // 上传失败的回调函数
    uploadFail(err) {
      console.log("失败:", err);
    },

    handleChange(value) {
      this.$emit("areachange", value);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.goodsInput {
  float: left;
}
.el-form-item__label {
  width: 150px;
}
</style>